<template>
  <el-dialog
    :title="title"
    :model-value="dialogVisible"
    :width="width"
    center
    destroy-on-close
    :before-close="closeDialog"
    :close-on-click-modal="false"
    append-to-body
    draggable
  >
    <slot name="form"></slot>
    <slot name="info"></slot>
    <slot name="table"></slot>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="handleConfirm"> 确 定 </el-button>
        <slot name="btn"></slot>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  components: {},
  props: {
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '500px'
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  emits: ['close', 'handleConfirm'],
  setup(props, { emit }) {
    const closeDialog = () => {
      emit('close')
    }

    const handleConfirm = () => {
      emit('handleConfirm')
    }

    return { closeDialog, handleConfirm }
  }
})
</script>

<style scoped></style>
